<template>
  <a-modal class="wd_dialog" :maskClosable='false' :keyboard='false' :closable="closable" @cancel="cancelFun"
    :getContainer="getContainer" :destroyOnClose='true' v-bind="modelData.options" v-model:visible="modelData.show"
    :width="dialogData.width">
    <template #footer>
      <a-spin :spinning="dialogData.loading||false" size='large'>
          <template #indicator>
                <span></span>
          </template>
        <i-button :buttonData="cancelDate" @dialogCancel="dialogCancel()" v-if="modelData.onCancel"></i-button>
        <template v-for="(item,index) in buttonList">
          <i-button v-if="!item.template&&item.isShow===true" :buttonData="changeButtonData(item)" :data='item'
            @buttonclick="(data)=>{buttonClick(item,data)}" :key="index">
          </i-button>
          <slot v-else-if="item.isShow!=false" :name="item.template"></slot>
        </template>
        <i-button :buttonData="submitDate" @dialogSubmit="dialogSubmit()" v-if="modelData.onSubmit"></i-button>
      </a-spin>
    </template>
    <template #title>
      <span class="wd-dialog-title">{{modelData.title}}</span>
    </template>
    <template #closeIcon>
      <svg class="icon-sm dialog-icon-sm" aria-hidden="true">
        <use xlink:href="#icondanchuangshanchu" />
      </svg>
    </template>
    <a-spin :spinning="dialogData.loading||false" tip='数据加载中...' size='large'>
      <slot></slot>
    </a-spin>
  </a-modal>
</template>

<script lang="ts">
import {
  defineComponent,
  PropType,
  computed,
  getCurrentInstance,
  ref
} from 'vue'
import IButton from '../../IButton/src/IButton.vue'
import {
  DialogDataInterface,
  ButtonOptionsInterFace
} from './IDialogInterFace'
// import { Modal, Spin } from 'ant-design-vue'
import { ButtonInterFace } from '@/IButton/src/ButtonInterFace'
export default defineComponent({
  name: 'wd_dialog',
  props: {
    dialogData: {
      type: Object as PropType<DialogDataInterface>,
      required: true
    }
  },
  setup (props, ctx) {
    const btnVail = ref<boolean>(false)
    const closable = computed((): boolean => {
      return !btnVail.value
    })
    const submitDate = computed((): ButtonInterFace => {
      return {
        label: props.dialogData.defaultSubText
          ? props.dialogData.defaultSubText
          : '确定',
        Fun: 'dialogSubmit',
        options: {
          type: 'primary'
        },
        loading: btnVail.value,
        isShow: true
      }
    })
    const cancelDate = computed((): ButtonInterFace => {
      return {
        label: props.dialogData.defaultCancelText
          ? props.dialogData.defaultCancelText
          : '取消',
        Fun: 'dialogCancel',
        options: {
          type: 'default',
          disabled: btnVail.value
        },
        isShow: true
      }
    })
    const buttonList = computed(() => {
      const list: ButtonOptionsInterFace[] = []
      if (props.dialogData.buttonObject) {
        Object.keys(props.dialogData.buttonObject).forEach((item: string) => {
          props.dialogData.buttonObject &&
            list.push(props.dialogData.buttonObject[item])
        })
      }
      return list
    })
    // 默认提交
    const dialogSubmit = async () => {
      btnVail.value = true
      if (modelData.value.onSubmit) {
        await modelData.value.onSubmit()
        btnVail.value = false
      } else {
        btnVail.value = false
      }
    }
    // 默认取消
    const dialogCancel = () => {
      if (modelData.value.onCancel) {
        modelData.value.onCancel()
      }
    }
    // 弹出框关闭
    const cancelFun = () => {
      if (modelData.value.cancel) {
        modelData.value.cancel()
      } else {
        dialogCancel()
        ctx.emit('cancel')
      }
    }
    const modelData = computed((): DialogDataInterface => {
      return props.dialogData
    })
    const appCtx = getCurrentInstance()
    const getContainer = () => appCtx && appCtx.appContext.app._container
    const buttonClick = (buttonData: ButtonOptionsInterFace, data: any) => {
      handChange(buttonData.buttonFun, data)
    }
    const handChange = (fun: string, val: any) => {
      if (fun) {
        ctx.emit(fun, val)
      }
    }
    return {
      buttonList,
      buttonClick,
      handChange,
      btnVail,
      closable,
      dialogSubmit,
      dialogCancel,
      cancelDate,
      submitDate,
      cancelFun,
      getContainer,
      modelData
    }
  },
  methods: {
    // 配置button组件Fun属性
    changeButtonData (item: ButtonOptionsInterFace) {
      item.Fun = 'buttonclick'
      return item
    }
  },
  components: {
    IButton
    // 'a-modal': Modal,
    // 'a-spin': Spin
  }
})
</script>
